<template>
    <div class="echarts-box">
      <div id="myEcharts" :style="{ width: '100%', height: '600px' }"></div>
    </div>
</template>
  <script>
  // 导入 ECharts
  import * as echarts from "echarts";
  import {onMounted, onUnmounted} from "vue";
  
  export default {
    name: "App",
    props: ["width", "height"],
    data() {
      return {
        // 数据源一，从服务器获得
        postTitle: [0, 1, 2, 3, 4],
        // 数据源二，从服务器获得
        postLikes: [0, 1, 2, 3, 4],
        myEcharts: {},
        option: {
          // 设置图表的 X 轴
          xAxis: {
            // 数据类型为离散的类目数据
            type: "category",
            // 设置 X 轴数据
            data: this.postTitle,
          },
          // 设置图表的 Y 轴
          yAxis: {
            // 数据类型为连续的数值数据
            type: "value",
          },
          // 设置图表的图例
          series: [
            {
              // 图例中要展示的数据
              data: this.postLikes,
              // 设置图表的类型为柱状图
              type: "bar",
            }
          ]
        },
      }
    },
    setup() {
      let myEcharts = echarts;
  
      // 挂载时初始化图表
      onMounted(() => {
        initChart();
      });
  
      // 卸载时销毁图表
      onUnmounted(() => {
        // 销毁图表
        myEcharts.dispose;
      });
  
      function initChart() {
        // 基于准备好的dom，初始化echarts实例
        let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
        chart.setOption({
          // 设置图表的标题
          title: {
            // 设置标题文本
            text: "2021年各月份销售量（单位：件）",
            // title 组件离容器左侧的距离
            left: "center",
          },
          // 设置图表的 X 轴
          xAxis: {
            // 数据类型为离散的类目数据
            type: "category",
            // 设置 X 轴数据
            data: [
              "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
            ]
          },
          // 设置提示框组件
          tooltip: {
            // 设置提示框的触发条件
            trigger: "axis"
          },
          // 设置图表的 Y 轴
          yAxis: {
            // 数据类型为连续的数值数据
            type: "value"
          },
          // 设置图表的图例
          series: [
            {
              // 图例中要展示的数据
              data: [
                606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
              ],
              // 设置图表的类型为折线图
              type: "line",
              // 平滑曲线
              smooth: true,
              // 在顶部显示数据
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    formatter: "{c}"
                  }
                }
              }
            }
          ]
        });
        // 大小自适应窗口大小变化
        window.onresize = function () {
          // 重置容器高宽
          chart.resize();
        };
      }
  
      return {
        initChart
      };
    },
      
    watch: {
      // 如果 postTitle 发生变化，则重新渲染图表
      postTitle: {
        handler: function (newVal, oldVal) {
          if (newVal !== oldVal) {
            this.option.xAxis.data = this.postTitle;
            // 横坐标变化，纵坐标也相应变化
            this.option.series[0].data = this.postLikes;
            // 重新渲染图表
            this.myEcharts.setOption(this.option);
          }
        },
        deep: true
      },
      postLikes: {
        handler: function (newVal, oldVal) {
          if (newVal !== oldVal) {
            this.option.series[0].data = this.postLikes;
            this.myEcharts.setOption(this.option);
          }
        },
        deep: true
      }
    }
  };
  </script>
  